<template>
  <div class="BeatsSolo3">
    <h1 class="title">
      <span>Beats Solo<sup>3</sup> Wireless</span>
    </h1>

    <div v-for="(item,index) in newData" :key="index">
      <Swiper v-if='item.type=="swiperList"' :dataList="item.data"></Swiper>
    </div>

    <div class="container">
      <h1>无论你去向何方，Beats Solo<sup>3</sup> Wireless 贴耳式耳机都能让你沉浸在大奖级的丰富音质之中</h1>
      <ul>
        <li>
          <img src="@/assets/images/BeatsSolo3/content1.png">
          <h2>专为自由聆听而设计</h2>
          <span>时尚、流线型设计，方便折叠，加上通过 Apple W1 芯片实现的无缝连接，意味着这款耳机耐用且足够便携，可以随身携带。</span>
        </li>
        <li>
          <img src="@/assets/images/BeatsSolo3/content2.png">
          <h2>聆听时间最长可达 40 小时</h2>
          <span>电池续航时间如此之长，非常适合日常使用，配有软垫的耳罩适合长时间佩戴。</span>
        </li>
        <li>
          <img src="@/assets/images/BeatsSolo3/content3.png">
          <h2>通过 Fast Fuel 闪充技术充电</h2>
          <span>在电池电量不足时，使用 Fast Fuel 闪充技术充电 5 分钟，即可持续播放 3 小时，迅速带你重回音乐世界。</span>
        </li>
        <li>
          <img src="@/assets/images/BeatsSolo3/content4.png">
          <h2>接听电话和控制功能</h2>
          <span>耳罩上的控制功能，配合双波束成型的麦克风，让你可以随时随地接听电话、播放音乐、调节音量以及启用语音。</span>
        </li>
      </ul>

      <div class="box" @click="boxClick()">
        <h2>
          查看所有详情
          <img id="icon" src="https://www.beatsbydre.com.cn/content/dam/beats/web/common/icons/misc/png/circle-chevron.png.large.1x.png">
        </h2>

        <div class="message" v-show="!isActive">
          <div style="margin-top: 50px;">
            <h2>音质</h2>
            <ul>
              <li>
                <span>- 精湛的音质，带来清澈音色和深度音场，且有隔绝噪音效果</span>
              </li>
            </ul>
          </div>

          <div style="margin-top: 50px;">
            <h2>设计</h2>
            <ul>
              <li>
                <span>- 贴耳式耳机</span>
              </li>
              <li>
                <span>- 耳罩带有舒适的软垫，可自由调整贴合度，适合每天使用</span>
              </li>
              <li>
                <span>- 时尚流线型设计，坚固耐用，方便折叠，与你一路同行</span>
              </li>
              <li>
                <span>- 高度：7.8 英寸/19.8 厘米</span>
              </li>
              <li>
                <span>- 重量：7.58 盎司/215 克</span>
              </li>
            </ul>
          </div>

          <div style="margin-top: 50px;">
            <h2>连接方式</h2>
            <ul>
              <li>
                <span>- 1类蓝牙®搭载 Apple W1 芯片，在 Apple 设备间实现无缝连接和切换，覆盖范围更广，信号丢失更少</span>
              </li>
              <li>
                <span>- 音频共享功能可让你以无线方式，在 Beats Solo3 Wireless 和另一副 Beats 耳机或 AirPods 之间分享歌曲、播客或电影等音频内容</span>
              </li>
              <li>
                <span>- Micro USB 端口</span>
              </li>
              <li>
                <span>- 立体声蓝牙®</span>
              </li>
              <li>
                <span>- 兼容 Android</span>
              </li>
            </ul>
          </div>

          <div style="margin-top: 50px;">
            <h2>电源</h2>
            <ul>
              <li>
                <span>- 电池使用时间最长可达 40 小时</span>
              </li>
              <li>
                <span>- Fast Fuel 闪充技术：充电 5 分钟即可持续播放 3 小时</span>
              </li>
              <li>
                <span>- 耳机插入电源时，LED 电量指示灯将显示电量充满或电量耗尽；耳机未插入电源时，LED 电量指示灯将显示电量充满、电量低或电量耗尽。</span>
              </li>
              <li>
                <span>- 通过 Micro-USB 线缆充电</span>
              </li>
              <li>
                <span>- 锂离子充电电池</span>
              </li>
            </ul>
          </div>

          <div style="margin-top: 50px;">
            <h2>控制按钮</h2>
            <ul>
              <li>
                <span>- 使用耳罩上的多功能控制按钮可以接听电话、控制音乐以及启动 Siri2 (需要使用 iCloud 帐户以及 macOS Sierra、iOS 10、watchOS 3 或更高版本)</span>
              </li>
              <li>
                <span>- 波束成形麦克风，实现高清晰通话</span>
              </li>
            </ul>
          </div>

          <div style="margin-top: 50px;">
            <h2>包装内容</h2>
            <ul>
              <li>
                <span>- Beats Solo3 Wireless 头戴式耳机</span>
              </li>
              <li>
                <span>- 便携盒</span>
              </li>
              <li>
                <span>- 通用 USB 充电线 (USB-A 转 USB Micro-B)</span>
              </li>
              <li>
                <span>- 快速入门指南</span>
              </li>
              <li>
                <span>- 保修卡</span>
              </li>
            </ul>
          </div>

        </div>

      </div>
    </div>

    <img src="https://www.beatsbydre.com.cn/content/dam/beats/web/product/headphones/solo3-wireless/pdp/202010/solo3-pdp-p02.jpg.medium.1x.jpg"
         style="width: 10rem; margin-top: 50px;">

    <div style="height: 100px;"></div>

  </div>
</template>

<script>
import Swiper from "@/components/home/Swiper";
import {api1} from "@/common/api/request";

export default {
  name: "BeatsSolo3",
  data(){
    return{
      newData:[],
      path:'/home/BeatsSolo3',
      isActive: true
    }
  },
  components:{
    Swiper
  },

  // activated() { //路由活跃时，添加上离开时的路径
  //   this.$router.push(this.path)
  //   this.$store.state.selectedId = this.$store.state.activeUrl.indexOf(this.path)
  // },
  // beforeRouteLeave(to,from,next){ //离开路由组件前
  //   this.path = this.$route.path  //记录此时路由路径
  //   next()
  // },


  created() {
    this.apiInit()
  },
  methods:{
    apiInit(){
      api1({
        url: '/api/index_list/1/data/1'
      }).then(res => {
        this.newData = res.data
        //console.log(res.data)
      })
    },
    boxClick(){
      this.isActive = !this.isActive
      if(!this.isActive){
        document.getElementById("icon").style.transform = "rotate("+180+"deg)";
      }
      else{
        document.getElementById("icon").style.transform = "rotate("+360+"deg)";
      }

    }
  }
}
</script>

<style scoped lang="scss">
.BeatsSolo3{
  position: relative;
  top: 92px;
  right: 0;
  left: 0;
}
.title{
  text-align: center;
  font-size: xxx-large;
}
.container{
  margin-top: 50px;
  text-align: left;
  width: 8rem;
  float: right;
  ul{
    display: flex;
    flex-wrap: wrap;
    li{
      margin-top: 30px;
      margin-left: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 500px;
      img{
        width: 90px;
        height: 90px;
      }
      span{
        font-size: 20px;
      }
    }
  }
  .box{
    width: 5rem;
    padding-top: 100px;
    img{
      width: 32px;
      height: 32px;
    }
  }
}
.message{
  ul{
    display: contents;
    li{
      width: 6.666667rem;
      text-align: left;
      align-items: start;
    }
  }
  span{
    font-size: 20px;
  }
}
</style>